<template>
  <!-- 左侧 -->
  <div v-loading="!tabBar" style="height: calc(100vh - 70px - 50px - 90px)">
    <div class="diy-content" v-if="tabBar">
      <div class="diy-left" v-loading="componentsLoading">
        <div v-for="(item, index) in componentsList" :key="index">
          <div class="diy-left_title">{{ item.title }}</div>
          <div class="diy-left_btn_list">
            <div
              v-for="(citem, cindex) in item.data"
              :key="cindex"
              size="mini"
              class="diy-left_btn"
              @click="add(citem, item.type)"
            >
              <i
                class="iconfont diy-left_icon"
                :class="citem.icon || citem.iconPath"
              ></i>
              <div>{{ citem.title }}</div>
            </div>
          </div>
        </div>
        <div
          v-if="!componentsLoading && componentsList.length <= 0"
          style="padding: 20px"
        >
          没有可用组件,该页面暂不能diy,点击底部菜单切换到其他页面
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="diy-center">
        <div class="diy-title">{{ title }}</div>
        <div class="diy-phone">
          <nav-bar
            :page="navBar"
            :tabActiveKey="tabActiveKey"
            :isShowUserCenter="isShowUserCenter"
            :tabBar="tabBar"
            @goUcenter="tabChange"
          ></nav-bar>
          <div class="drag-box" ref="drag">
            <vuedraggable v-model="page[tabActiveKey].list">
              <transition-group>
                <div
                  v-for="(item, index) in page[tabActiveKey].list"
                  :key="`drag_${index}`"
                  class="drag-item"
                  :class="[
                    { 'drag-item--select': index == activeIndex },
                    { 'drag-item-questionnaire': item.type == 'questionnaire' }
                  ]"
                  @click="select(item.id)"
                  @mouseover="hover(item.id)"
                >
                  <!-- 轮播图 -->
                  <banner v-if="item.type == 'banner'" :o="item"></banner>
                  <!-- 分类图 -->
                  <column v-if="item.type == 'column'" :o="item"></column>
                  <!-- 广告 -->
                  <imagewindow
                    v-if="item.type == 'imagewindow'"
                    :o="item"
                  ></imagewindow>
                  <!-- 工地列表 -->
                  <site v-if="item.type == 'site'" :o="item"></site>
                  <!-- 装修案例 -->
                  <cased v-if="item.type == 'case'" :o="item"></cased>
                  <!-- 装修攻略 -->
                  <strategy v-if="item.type == 'strategy'" :o="item"></strategy>
                  <!-- 用户信息 -->
                  <userInfo v-if="item.type == 'userInfo'" :o="item"></userInfo>
                  <!-- 创建名片 -->
                  <createCard
                    v-if="item.type == 'createCard'"
                    :o="item"
                  ></createCard>
                  <!-- 菜单模板 -->
                  <moduleMenu
                    v-if="item.type.includes('moduleMenu')"
                    :o="item"
                  ></moduleMenu>
                  <!-- 切换销售 -->
                  <changeStaff
                    v-if="item.type == 'changeStaff'"
                    :o="item"
                  ></changeStaff>
                  <!-- 分销申请 -->
                  <distributionApply
                    v-if="item.type == 'distributionApply'"
                    :o="item"
                  ></distributionApply>
                  <!-- 搜索栏 -->
                  <search v-if="item.type == 'search'" :o="item"></search>
                  <!-- 房源列表 -->
                  <houseList
                    v-if="item.type == 'houseList'"
                    :o="item"
                  ></houseList>
                  <!-- 名片 -->
                  <!-- 名片模块 -->
                  <cardModule
                    v-if="item.type == 'cardModule'"
                    :o="item"
                  ></cardModule>
                  <!-- 福包 -->
                  <couponList
                    v-if="item.type == 'couponList'"
                    :o="item"
                  ></couponList>
                  <!-- 公众号组件 -->
                  <official v-if="item.type == 'official'" :o="item"></official>
                  <!-- 个人简介 -->
                  <staffIntroduce
                    v-if="item.type == 'staffIntroduce'"
                    :o="item"
                  ></staffIntroduce>
                  <!-- VR全景 -->
                  <myVR v-if="item.type == 'myVR'" :o="item"></myVR>
                  <!-- 我的视频 -->
                  <myVideo v-if="item.type == 'myVideo'" :o="item"></myVideo>
                  <!-- 我的照片 -->
                  <myPhoto v-if="item.type == 'myPhoto'" :o="item"></myPhoto>
                  <!-- 主推商品 -->
                  <myGoods v-if="item.type == 'myGoods'" :o="item"></myGoods>
                  <!-- 我的动态 -->
                  <myDynamic
                    v-if="item.type == 'myDynamic'"
                    :o="item"
                  ></myDynamic>
                  <!-- 推荐案例 -->
                  <myCase v-if="item.type == 'myCase'" :o="item"></myCase>
                  <!-- 在建工地 -->
                  <mySite v-if="item.type == 'mySite'" :o="item"></mySite>
                  <!-- 商城 -->
                  <!-- 优惠券列表 同 名片页福包模块 -->
                  <!-- 商品列表 -->
                  <goodsList
                    v-if="item.type == 'goodsList'"
                    :o="item"
                  ></goodsList>
                  <!-- 动态 -->
                  <!-- 动态列表 -->
                  <dynamicList
                    v-if="item.type == 'dynamicList'"
                    :o="item"
                  ></dynamicList>
                  <!-- 官网 -->
                  <!-- 文章列表 -->
                  <articleList
                    v-if="item.type == 'articleList'"
                    :o="item"
                  ></articleList>
                  <!-- 图文详情 -->
                  <imageText
                    v-if="item.type == 'imageText'"
                    :o="item"
                  ></imageText>
                  <!-- 招聘信息 -->
                  <recruitInfo
                    v-if="item.type == 'recruitInfo'"
                    :o="item"
                  ></recruitInfo>
                  <!-- 联系我们 -->
                  <contactUs
                    v-if="item.type == 'contactUs'"
                    :o="item"
                  ></contactUs>
                  <!-- 员工展示 -->
                  <staffList
                    v-if="item.type == 'staffList'"
                    :o="item"
                  ></staffList>
                  <!-- 视频模块 -->
                  <videoModule
                    v-if="item.type == 'videoModule'"
                    :o="item"
                  ></videoModule>
                  <!-- 表单模块 -->
                  <formModule
                    v-if="item.type == 'formModule'"
                    :o="item"
                  ></formModule>
                  <!-- 明星展示 -->
                  <starList v-if="item.type == 'starList'" :o="item"></starList>
                  <!-- 餐饮 -->
                  <!-- 分类导航 -->
                  <restaurantCateList
                    v-if="item.type == 'restaurantCateList'"
                    :o="item"
                  ></restaurantCateList>
                  <!-- 新人专区 -->
                  <restaurantNewList
                    v-if="item.type == 'restaurantNewList'"
                    :o="item"
                  ></restaurantNewList>
                  <!-- 推荐菜品列表 -->
                  <restaurantGoodsList
                    v-if="item.type == 'restaurantGoodsList'"
                    :o="item"
                  ></restaurantGoodsList>
                  <!-- 问卷调查 -->
                  <questionnaire
                    v-if="item.type == 'questionnaire'"
                    :o="item"
                  ></questionnaire>
                  <!-- 汽车个人中心邀请好友 -->
                  <inviteFriends
                    v-if="item.type == 'inviteFriends'"
                    :o="item"
                  ></inviteFriends>
                  <!-- 汽车首页搜索栏 -->
                  <carSearch
                    v-if="item.type == 'carSearch'"
                    :o="item"
                  ></carSearch>
                  <!-- 汽车首页文章列表 -->
                  <carArticleList
                    v-if="item.type == 'carArticleList'"
                    :o="item"
                  ></carArticleList>
                  <!-- 汽车列表 -->
                  <carList v-if="item.type == 'carList'" :o="item"></carList>

                  <!-- 操作栏 -->
                  <div class="op-area" v-if="hoverId === item.id">
                    <!-- 删除 -->
                    <div
                      class="op-area-item"
                      @click="opdel(index)"
                      v-if="item.isDelete"
                    >
                      <i
                        class="iconfont iconguanbi1"
                        style="font-size: 10px"
                      ></i>
                    </div>
                    <!-- 上移 -->
                    <div
                      class="op-area-item"
                      @click="opup(index)"
                      v-if="index > 0"
                    >
                      <i
                        class="iconfont iconjiantou_down"
                        style="
                          font-size: 20px;
                          transform: rotate(180deg);
                          margin-top: -1px;
                        "
                      ></i>
                    </div>
                    <!-- 下移 -->
                    <div
                      class="op-area-item"
                      @click="opdown(index)"
                      v-if="index < page[tabActiveKey].list.length - 1"
                    >
                      <i
                        class="iconfont iconjiantou_down"
                        style="font-size: 20px"
                      ></i>
                    </div>
                  </div>
                </div>
              </transition-group>
            </vuedraggable>
          </div>

          <div v-if="tabActiveKey === 20001 && tabActiveIsShow != 1"></div>
          <div v-else>
            <tab-bar
              :tabBar="tabBar"
              :nowPageKey="tabActiveKey"
              @change="tabChange"
              :class="{ 'drag-item--select': 'tabbar' == activeId }"
            ></tab-bar>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="diy-right">
        <!-- 底部菜单 -->
        <div v-if="activeId && activeIndex > -1">
          <div class="diy-right-title">
            <div class="diy-right_line"></div>
            <div>{{ page[tabActiveKey].list[activeIndex].title }}</div>
          </div>
          <div class="diy-right-content">
            <!-- 属性组件 -->
            <diy-setting
              :o="page[tabActiveKey].list[activeIndex]"
              :ckey="tabActiveKey"
              :activeIndex="activeIndex"
              :activeId="activeId"
              :componentsList="componentsList"
            ></diy-setting>
            <div style="height: 30px"></div>
          </div>
        </div>

        <div v-if="activeId == 'tabbar'">
          <div class="diy-right-title">
            <div class="diy-right_line"></div>
            <div>导航菜单</div>
          </div>
          <div class="diy-right-content">
            <tabbar-setting
              :o="tabBar"
              :page="page"
              :all-tab-bar="this.allTabBar"
              :nowPageKey="tabActiveKey"
              @radioChange="isShowUcenter"
              @del="ondelTabbar"
              @input="changeInput"
              @command="tabCommand"
            ></tabbar-setting>
          </div>
        </div>
      </div>
    </div>
    <!-- diy底部 -->
    <div
      class="diy-foot"
      v-if="tabBar"
      style="bottom: 0px"
      :style="{ right: adSwitch ? '242px' : '22px' }"
    >
      <el-button @click="goBack">取消</el-button>
      <el-button type="primary" :plain="true" @click="getSystemDefaulDiy">{{
        $t('action.defaultSet')
      }}</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="primary" @click="submitAndUse">保存并使用</el-button>
    </div>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'
import navBar from '../../components/diy/navBar.vue'
import tabBar from '../../components/diy/tabBar.vue'
import tabbarSetting from '../../components/diy/tabbarSetting.vue'
import diySetting from '../../components/diy/diySetting.vue'

import userInfo from '../../components/diy/userInfo.vue'
import createCard from '../../components/diy/createCard.vue'
import moduleMenu from '../../components/diy/moduleMenu.vue'
import changeStaff from '../../components/diy/changeStaff.vue'
import distributionApply from '../../components/diy/distributionApply.vue'

import banner from '../../components/diy/banner.vue'
import column from '../../components/diy/column.vue'

import imagewindow from '../../components/diy/imagewindow.vue'
import site from '../../components/diy/site.vue'
import cased from '../../components/diy/case.vue'
import strategy from '../../components/diy/strategy.vue'

import search from '../../components/diy/search.vue'
import houseList from '../../components/diy/houseList.vue'

import cardModule from '../../components/diy/cardModule.vue'
import couponList from '../../components/diy/couponList.vue'
import official from '../../components/diy/official.vue'
import staffIntroduce from '../../components/diy/staffIntroduce.vue'
import myVR from '../../components/diy/myVR.vue'
import myVideo from '../../components/diy/myVideo.vue'
import myPhoto from '../../components/diy/myPhoto.vue'
import myGoods from '../../components/diy/myGoods.vue'
import myDynamic from '../../components/diy/myDynamic.vue'
import myCase from '../../components/diy/myCase.vue'
import mySite from '../../components/diy/mySite.vue'

import goodsList from '../../components/diy/goodsList.vue'

import dynamicList from '../../components/diy/dynamicList.vue'

import articleList from '../../components/diy/articleList.vue'
import imageText from '../../components/diy/imageText.vue'
import recruitInfo from '../../components/diy/recruitInfo.vue'
import contactUs from '../../components/diy/contactUs.vue'
import staffList from '../../components/diy/staffList.vue'
import videoModule from '../../components/diy/videoModule.vue'
import formModule from '../../components/diy/formModule.vue'
import starList from '../../components/diy/starList.vue'

import restaurantCateList from '../../components/diy/restaurantCateList.vue'
import restaurantNewList from '../../components/diy/restaurantNewList.vue'
import restaurantGoodsList from '../../components/diy/restaurantGoodsList.vue'
import questionnaire from '../../components/diy/questionnaire.vue'

import inviteFriends from '../../components/diy/inviteFriends.vue'
import carSearch from '../../components/diy/carSearch.vue'
import carArticleList from '../../components/diy/carArticleList.vue'
import carList from '../../components/diy/carList.vue'

import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'diy',
  components: {
    vuedraggable,
    diySetting,
    navBar,
    tabBar,
    tabbarSetting,
    banner,
    column,
    imagewindow,
    site,
    cased,
    strategy,
    userInfo,
    createCard,
    moduleMenu,
    changeStaff,
    distributionApply,
    search,
    houseList,
    cardModule,
    couponList,
    official,
    staffIntroduce,
    myVR,
    myVideo,
    myPhoto,
    myGoods,
    myDynamic,
    myCase,
    mySite,
    goodsList,
    dynamicList,
    articleList,
    imageText,
    recruitInfo,
    contactUs,
    staffList,
    videoModule,
    formModule,
    starList,
    restaurantCateList,
    restaurantNewList,
    restaurantGoodsList,
    questionnaire,
    inviteFriends,
    carSearch,
    carArticleList,
    carList
  },
  props: {},
  data () {
    return {
      typeList: ['articleList', 'imageText', 'recruitInfo', 'contactUs', 'staffList', 'videoModule', 'formModule', 'starList'],
      componentsLoading: false,
      componentsList: [],
      allTabBar: '',
      isShowUserCenter: 20001,
      navBar: {
        name: '顶部导航',
        id: 'navbar',
        params: {
          title: '装修',
          share_title: '分享标题'
        },
        style: {
          titleTextColor: '#000000',
          titleBackgroundColor: '#ffffff'
        }
      },
      tabBar: '',
      id: '',
      title: '',
      page: {},
      activeId: '',
      hoverId: '',
      activeIndex: -1,
      tabActiveKey: -1,
      tabActiveIsShow: -1

    }
  },
  async created () {
    this.consoleJson()
    let { id } = this.$route.query
    this.id = id
    this.changeRoutesItem({ key: 'diyID', val: id })
    if (id) {
      setTimeout(() => {
        this.getInfo()
      }, 500)
    }
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    }),
    ...mapGetters(['adSwitch'])
  },
  methods: {
    ...mapMutations(['changeRoutesItem']),
    consoleJson () {
      // console.log(JSON.stringify(this.initData.cardPage))
      // console.log(JSON.stringify(this.initData.mallsPage))
      // console.log(JSON.stringify(this.initData.dynamicPage))
      // console.log(JSON.stringify(this.initData.websitePage))
    },
    changeInput (e) {
      if (this.tabActiveKey === e.active) {
        this.navBar.params.title = e.val
      }
    },
    // 添加组件
    async add (item, compontents) {
      console.log(item.type, compontents, this.componentsList, '===add')
      let pageAdd = 0
      if (this.page[this.tabActiveKey].list.length > 0) {
        this.page[this.tabActiveKey].list.map(citem => {
          if (citem.type === item.type) {
            pageAdd++
          }
        })
      }
      if (item.addNumber === 0 || item.addNumber === pageAdd) {
        this.$message.error(`不能添加${item.title}了`)
        return
      }
      let aitem = item

      await this.getComponentsList(false)

      let componentsList = JSON.parse(JSON.stringify(this.componentsList))
      componentsList.map(bitem => {
        if (bitem.type === compontents) {
          bitem.data.map(citem => {
            if (citem.type === aitem.type) {
              aitem.data[aitem.data.addMouduleName] =
                citem.data[citem.data.addMouduleName]
            }
          })
        }
      })
      let resList = JSON.parse(
        JSON.stringify(this.page[this.tabActiveKey].list)
      )
      let id = +new Date() + resList.length + 1
      aitem.id = id
      aitem.compontents = compontents
      resList.push(aitem)
      this.page[this.tabActiveKey].list = resList
      let data = JSON.parse(JSON.stringify(this.page[this.tabActiveKey].list))
      this.activeId = id
      this.activeIndex = data.findIndex(current => {
        return current.id === id
      })
      // 添加组件完滚动到底部
      this.$nextTick(() => {
        let divDom = this.$refs.drag
        divDom.scrollTop = divDom.scrollHeight
      })
    },
    // 选中
    async select (id) {
      // if (id === 'tabbar') return
      this.activeId = id
      this.activeIndex = this.page[this.tabActiveKey].list.findIndex(item => {
        return item.id === this.activeId
      })
      console.log('ddd======> select', this.activeId, this.activeIndex, this.page)
      if (id === 'tabbar') return
      let { tabActiveKey, activeIndex } = this
      if (this.page[tabActiveKey].list.length < 1) return
      let { attr, compontents, type } = this.page[tabActiveKey].list[activeIndex]
      let comIndex = this.componentsList.findIndex(item => {
        return item.type === compontents
      })
      this.componentsList[comIndex].data.map(item => {
        if (item.type === type) {
          attr = item.attr
        }
      })
      this.page[tabActiveKey].list[activeIndex].attr = attr
      if (tabActiveKey === 4) {
        let { type: curType, data } = this.page[tabActiveKey].list[activeIndex]
        if (this.typeList.includes(curType)) {
          this.getWebsiteDiySelect(data.modular_type)
        }
      }
    },
    // 获取官网对应模块数据
    async getWebsiteDiySelect (type) {
      let { code, data } = await this.$api.getWebsiteDiySelect({ type })
      if (code !== 200) return
      let { attr } = this.page[this.tabActiveKey].list[this.activeIndex]
      attr.map((item, index) => {
        if (item.type === 'Select' && item.name === 'modular') {
          item.data = data
        }
      })
    },
    hover (id) {
      this.hoverId = id
    },
    isShowUcenter (tabbar) {
      let isShow = 20001
      tabbar.list.map((item, index) => {
        if (item.key === 20001) {
          isShow = item.is_show
          this.tabActiveIsShow = item.is_show
        }
      })
      this.isShowUserCenter = isShow
    },
    // tabBar点击事件
    tabChange (e) {
      let { key, isShow } = e
      this.tabActiveKey = key
      this.tabActiveIsShow = isShow
      this.changeRoutesItem({ key: 'diyKey', val: key })
      this.select('tabbar')
      this.setNavBarTitle()
      this.getComponentsList()
    },
    tabCommand (index) {
      this.isShowUserCenter(this.allTabBar)
    },
    // 获取页面数据
    async getInfo () {
      this.loading = true
      let [menuRes, diyRes] = await Promise.all([
        this.$api.getMenuList(),
        this.$api.getDiyData({
          diy_id: this.id
        })
      ])
      if (menuRes.code === 200) {
        this.allTabBar = menuRes.data
        console.log('this', this.allTabBar)
      }

      if (diyRes.code === 200) {
        let { tabbar, page, diy_name: diyName } = diyRes.data
        let { key: firstKey, is_show: firstIsShow } = tabbar.list[0]
        this.isShowUcenter(tabbar)
        this.tabBar = tabbar

        if (page[1]) {
          page[1].list.map(item => {
            if (item.type === 'myGoods' && !item.data.type) {
              item.data.type = 2
            }
          })
        }

        if (page[2]) {
          page[2].list.map(item => {
            if (item.type === 'goodsList' && !item.data.type) {
              item.data.type = 2
            }
          })
        }
        this.page = page
        this.title = diyName
        this.tabActiveKey = firstKey
        this.tabActiveIsShow = firstIsShow
        this.changeRoutesItem({ key: 'diyKey', val: firstKey })
      }

      this.setNavBarTitle()
      this.getComponentsList()
    },
    // 根据底部菜单key获取组件列表
    getComponentsList (refresh = true) {
      let key = this.tabActiveKey
      if (refresh) {
        this.componentsLoading = true
      }
      this.$api.getComponentsList({ key }).then(res => {
        this.componentsLoading = false
        this.componentsList = res.data
        if (key === 5) {
          this.getHouseCateData()
        }
      })
    },
    // 获取房产类型分类数据
    async getHouseCateData () {
      let { code, data } = await this.$api.getHouseCateData()
      if (code !== 200) return
      this.componentsList.map(item => {
        if (item.type === 'houseCompoent') {
          item.data.map(aitem => {
            if (aitem.type === 'houseList') {
              aitem.attr.map(bitem => {
                if (bitem.type === 'Cascader') {
                  bitem.data = data
                }
              })
              this.page[5].list.map(citem => {
                if (citem.type === 'houseList' && citem.data.getType) {
                  citem.data = aitem.data
                }
              })
            }
          })
        }
      })
    },
    // 设置页面标题
    setNavBarTitle () {
      console.log(this.tabActiveKey, '=====setNavBarTitle')
      this.tabBar.list.map(item => {
        if (item.key === this.tabActiveKey) {
          this.navBar.params.title = item.name
        }
      })
    },
    // 交换组件
    swapItems (arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    // 删除
    opdel (index) {
      let item = this.page[this.tabActiveKey].list[index]
      if (item.id === this.activeId) {
        this.activeId = ''
      }
      this.page[this.tabActiveKey].list.splice(index, 1)
    },
    // 上移
    opup (index) {
      this.page[this.tabActiveKey].list = this.swapItems(
        this.page[this.tabActiveKey].list,
        index,
        index - 1
      )
    },
    // 下移
    opdown (index) {
      this.page[this.tabActiveKey].list = this.swapItems(
        this.page[this.tabActiveKey].list,
        index,
        index + 1
      )
    },
    // 删除
    async ondelTabbar (e) {
      let { key, index } = e
      this.tabBar.list.splice(index, 1)
      delete this.page[key]
      // 操作的等于选中的
      if (key === this.tabActiveKey) {
        let { key: firstKey, is_show: firstIsShow } = this.tabBar.list[index - 1]
        this.tabActiveKey = firstKey
        this.tabActiveIsShow = firstIsShow
        this.changeRoutesItem({ key: 'diyKey', val: firstKey })
        this.setNavBarTitle()
        this.getComponentsList()
      }
    },
    /**
     * @method 返回上一页
     */
    goBack () {
      this.$route.meta.refresh = true
      this.$router.back(-1)
    },
    // 保存并使用
    async submitAndUse () {
      let param = {
        id: this.id,
        page: this.page,
        tabbar: this.tabBar
      }
      let { key: firstKey, is_show: firstIsShow } = this.tabBar.list[0]
      let msg =
        firstKey > 10000 && firstKey < 20000
          ? '第一个导航菜单仅支持小程序内部链接页面，请调整后再保存！'
          : firstKey === 20001 && firstIsShow !== 1
            ? '当个人中心显示到页面顶部时不能放在第一个导航菜单位置，请调整后再保存！'
            : ''
      if (msg) {
        this.$message.error(msg)
        return
      }

      if (this.page[4] && this.page[4].list.length > 0) {
        let webMsg = []
        this.page[4].list.map(item => {
          if (this.typeList.includes(item.type) && !item.data.modular) {
            webMsg.push(item.title)
          }
        })

        let errorMsg = ''
        if (webMsg.length > 0) {
          webMsg.map(item => {
            errorMsg += item + ' '
          })
          errorMsg += `未选择要展示的模块内容，请调整后再保存！`
        }

        if (errorMsg) {
          this.$message.error(errorMsg)
          return
        }
      }

      if (this.page[5] && this.page[5].list.length > 0) {
        let houseMsg = ''
        this.page[5].list.map(item => {
          if (item.type === 'houseList' && !item.data.category) {
            houseMsg = `房源列表未选择要展示的类型/分类，请调整后再保存！`
          }
        })
        if (houseMsg) {
          this.$message.error(houseMsg)
          return
        }
      }
      let [res1, res2] = await Promise.all([
        this.$api.setDiyData(param),
        this.$api.openADiy({
          diy_id: param.id
        })
      ])
      if (res1.code === 200 && res2.code === 200) {
        this.changeRoutesItem({ key: 'tabbar', val: this.tabBar })
        this.mergeLocaleMessage(this.tabBar)
        this.goBack()
      }
    },
    // 保存
    async submit () {
      let param = {
        id: this.id,
        page: this.page,
        tabbar: this.tabBar
      }
      let { key: firstKey, is_show: firstIsShow } = this.tabBar.list[0]
      let msg =
        firstKey > 10000 && firstKey < 20000
          ? '第一个导航菜单仅支持小程序内部链接页面，请调整后再保存！'
          : firstKey === 20001 && firstIsShow !== 1
            ? '当个人中心显示到页面顶部时不能放在第一个导航菜单位置，请调整后再保存！'
            : ''
      if (msg) {
        this.$message.error(msg)
        return
      }

      if (this.page[4] && this.page[4].list.length > 0) {
        let webMsg = []
        this.page[4].list.map(item => {
          if (this.typeList.includes(item.type) && !item.data.modular) {
            webMsg.push(item.title)
          }
        })

        let errorMsg = ''
        if (webMsg.length > 0) {
          webMsg.map(item => {
            errorMsg += item + ' '
          })
          errorMsg += `未选择要展示的模块内容，请调整后再保存！`
        }

        if (errorMsg) {
          this.$message.error(errorMsg)
          return
        }
      }

      if (this.page[5] && this.page[5].list.length > 0) {
        let houseMsg = ''
        this.page[5].list.map(item => {
          if (item.type === 'houseList' && !item.data.category) {
            houseMsg = `房源列表未选择要展示的类型/分类，请调整后再保存！`
          }
        })
        if (houseMsg) {
          this.$message.error(houseMsg)
          return
        }
      }
      let res = await this.$api.setDiyData(param)
      if (res.code === 200) {
        console.log(this.tabBar, 'this.tabBar')
        if (this.tabBar.id === this.routesItem.tabbar.id) {
          this.mergeLocaleMessage(this.tabBar)
        }
        this.goBack()
      }
    },
    // 获取默认的设置
    async getSystemDefaulDiy () {
      let { code, data } = await this.$api.getSystemDefaulDiy()
      if (code !== 200) return
      let { tabbar, page } = data
      this.$set(this, 'tabBar', tabbar)
      this.$set(this, 'page', page)
      this.$set(this, 'tabActiveKey', page[this.tabActiveKey] ? this.tabActiveKey : tabbar.list[0].key)
      this.setNavBarTitle()
      this.isShowUcenter(tabbar)
    },
    async mergeLocaleMessage (data) {
      let zh = {
        menu: {}
      }
      let name = {
        1: '名片',
        2: '商城',
        3: '动态',
        4: '官网'
      }
      data.list.map((item) => {
        if (item.name !== name[item.key]) { name[item.key] = item.name }
      })
      // zh.menu.BusinessCard = `${name[1]}`
      // zh.menu.CardSetting = `${name[1]}设置`
      // zh.menu.CardInfo = `${name[1]}信息`
      // zh.menu.CardManage = `${name[1]}管理`
      // zh.menu.StaffCard = `员工${name[1]}`
      // zh.menu.EditCard = `编辑${name[1]}`
      // zh.menu.Malls = `${name[2]}`
      // zh.menu.MallsManage = `${name[2]}管理`
      // zh.menu.MallsSet = `${name[2]}设置`
      // zh.menu.MallsBanner = `${name[2]}轮播图`
      // zh.menu.Dynamic = `${name[3]}`
      // zh.menu.DynamicSet = `${name[3]}设置`
      // zh.menu.DynamicManage = `${name[3]}管理`
      // zh.menu.EditOrdinary = `编辑普通${name[3]}`
      // zh.menu.EditLink = `编辑链接${name[3]}`
      // zh.menu.EditVideo = `编辑视频${name[3]}`
      // zh.menu.DynamicClassifySet = `${name[3]}分类设置`
      zh.menu.Website = `${name[4]}`
      zh.menu.WebsiteManage = `${name[4]}管理`
      zh.menu.WebSiteInfo = `${name[4]}信息`
      zh.menu.WebsiteColumn = `${name[4]}栏目`
      this.$i18n.mergeLocaleMessage('zh', zh)
    }
  }
}
</script>
<style scoped>
.diy-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #f4f6f8;
  height: calc(100vh - 70px - 110px);
  position: relative;
}
.diy-foot {
  position: fixed;
  left: 300px;
  bottom: 0;
  box-sizing: border-box;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 360px 0 272px;
  background: #fff;
  z-index: 10;
  border-top: 1px solid #eeeeee;
}

.diy-left,
.diy-right {
  width: 272px;
  border: 1px solid #eeeeee;
  height: calc(100vh - 70px - 110px);
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 9;
  background: #fff;
  border-bottom: none;
}

.diy-right {
  width: 360px;
}

.diy-right::-webkit-scrollbar,
.diy-left::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 0;
}

.diy-left_btn_list {
  display: flex;
  flex-wrap: wrap;
  color: #7d7e80;
  font-size: 12px;
}

.diy-left_btn {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.diy-left_btn_list .diy-left_btn:not(:nth-child(3n)) {
  border-right: 1px solid #eee;
}

.diy-left_btn_list .diy-left_btn:not(:nth-child(-n + 3)) {
  border-top: none;
}

.diy-left_title {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-size: 16px;
}

.diy-left_icon {
  font-size: 26px;
  margin-bottom: 5px;
}

.diy-right-title {
  width: 358px;
  height: 70px;
  font-size: 16px;
  display: flex;
  align-items: center;
  /* margin: 10px; */
  /* padding: 0 10px; */
  background: #f4f6f9;
  border: 10px solid white;
  line-height: 1;
  position: absolute;
  top: 1px;
  z-index: 22;
}

.diy-right_line {
  height: 18px;
  width: 4px;
  border-radius: 2px;
  background: #429dff;
  margin-right: 10px;
}

.diy-right-content {
  padding: 70px 10px 0 10px;
}
.diy-center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.diy-phone {
  width: 375px;
  border-radius: 3px;
  box-shadow: 0 3px 10px #dcdcdc;
  border: 1px solid #ddd;
  flex: 1;
  /* max-height: 677px; */
  min-height: calc(100vh - 70px - 110px - 60px);
  max-height: calc(100vh - 70px - 110px - 60px);
  /* min-height: calc(100vh - 70px - 110px - 120px);
  max-height: calc(100vh - 70px - 110px - 120px); */
  overflow: auto;
  background: #efeff5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.diy-title {
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
}

.fiexd {
  height: 80px;
  position: fixed;
  background-color: rgb(255, 255, 255);
  box-shadow: rgb(240, 240, 240) 1px -2px 8px;
  bottom: 0px;
  left: 300px;
  z-index: 5;
  display: flex;
  padding-left: 100px;
  align-items: center;
}
</style>
